@use "sass:math";

.form-error {
  display: block;
  padding-top: #{math.div(4, $base-font-size)}rem;
  width: #{math.div(300, $base-font-size)}rem;
  font-size: #{math.div(12, $base-font-size)}rem;
  text-align: left;
  @include themify() {
    color: getThemifyVariable("error-color");
  }
}

.form > * + * {
  margin-top: #{math.div(12, $base-font-size)}rem;
}

.form--inline {
  display: flex;
  align-items: center;
}

.form__cancel-button {
  margin-top: #{math.div(10, $base-font-size)}rem;
  font-size: #{math.div(12, $base-font-size)}rem;
}

.form__navigation-options {
  margin-top: #{math.div(16, $base-font-size)}rem;
  font-size: #{math.div(12, $base-font-size)}rem;
  @include themify() {
    color: getThemifyVariable("form-navigation-options-color");
  }

  @media (max-width: 550px) {
    text-align: center;
    margin: #{math.div(12, $base-font-size)}rem;
  }
}

.form__legend {
  font-size: #{math.div(21, $base-font-size)}rem;
  font-weight: bold;
}

.form__label {
  font-size: #{math.div(12, $base-font-size)}rem;
  margin-top: #{math.div(25, $base-font-size)}rem;
  margin-bottom: #{math.div(7, $base-font-size)}rem;
  display: block;
  @include themify() {
    color: getThemifyVariable("form-secondary-title-color");
  }
}

.form__label--hidden {
  @extend %hidden-element;
}

.form__input {
  min-width: #{math.div(312, $base-font-size)}rem;
  width: 100%;
  height: #{math.div(40, $base-font-size)}rem;
  font-size: #{math.div(16, $base-font-size)}rem;
  @include themify() {
    color: getThemifyVariable("form-input-text-color");
    background-color: getThemifyVariable("input-background-color");
  }
  
  @media (max-width: 770px) {
    max-width: 100%;
    width: 100%;
  }
}

.form__field__password {
  position: relative;
  display: flex;
  align-items: center;
}

.form__eye__icon {
  font-size: #{math.div(30, $base-font-size)}rem;
  position: absolute;
  right: 0px;
  
  & svg {
    transform: translateY(10%);
  }
}


.form__input[type='password']::-ms-reveal {
  display: none;
}

.form__input-flexible-height {
  height: auto;
  resize: none;
}

.form__input::placeholder {
  @include themify() {
    color: getThemifyVariable("form-input-placeholder-text-color");
  }
}

.form__context {
  text-align: left;
  margin-top: #{math.div(15, $base-font-size)}rem;
}
.form__resend-button {
  margin-top: #{math.div(8, $base-font-size)}rem;
}

.form__status {
  @include themify() {
    color: getThemifyVariable("form-navigation-options-color");
  }
}

.form [type="submit"] {
  margin-left: auto;
  margin-right: auto;
}

// .form [type="submit"] {
//   @extend %button;
//   padding: #{8 / $base-font-size}rem #{25 / $base-font-size}rem;
//   margin: #{39 / $base-font-size}rem 0 #{24 / $base-font-size}rem 0;
// }

// .form [type="submit"][disabled] {
//   cursor: not-allowed;
// }

// .form--inline [type="submit"] {
//   margin: 0 0 0 #{24 / $base-font-size}rem;
// }

// .form [type="submit"][disabled],
// .form--inline [type="submit"][disabled] {
//   cursor: not-allowed;
// }
